<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
            src="lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"
            src="lib/jquery-ui-1.8.4.custom/js/jquery.contextmenu.r2.js"></script>
</head>
<body>
<div id="demo2"> 右键点此</div>
<!--以下就是右键demo2后弹出的菜单项-->
<div class="contextMenu" id="myMenu2">
    <ul>
        <li id="item_1">选项一</li>
        <li id="item_2">选项二</li>
        <li id="item_3">选项三</li>
        <li id="item_4">选项四111</li>
    </ul>
</div>
<script type="text/javascript">
    $('#demo2').contextMenu('myMenu2', { //菜单样式
        menuStyle: {
            border: '2px solid #000'
        }, //菜单项样式
        itemStyle: {
            fontFamily: 'verdana',
            backgroundColor: 'green',
            color: 'white',
            border: 'none',
            padding: '1px'
        }, //菜单项鼠标放在上面样式
        itemHoverStyle: {
            color: 'blue',
            backgroundColor: 'red',
            border: 'none'
        }, //事件
        bindings: {
            'item_1': function(t) {
                alert('Trigger was ' + t.id + '\nAction was item_1');
            },
            'item_2': function(t) {
                alert('Trigger was ' + t.id + '\nAction was item_2');
            },
            'item_3': function(t) {
                alert('Trigger was ' + t.id + '\nAction was item_3');
            },
            'item_4': function(t) {
                alert('Trigger was ' + t.id + '\nAction was item_4');
            }
        }
    })
</script>
</body>
</html>